<!-- 播放器 -->
<template>
  <div class="player" v-show="showplayer">
    <!-- <div
      class="playerNull"
      v-if="SongDetail"
      style="width: 100%; height: 107px"
    >
  </div> -->

    <!-- 迷你播放器 -->
    <div class="mini-play" v-if="SongDetail">
      <!-- 左部唱片 -->
      <div class="title" @click="showbigplayer">
        <!-- 唱片儿 -->
        <div class="img">
          <img
            :class="!this.isplaying ? 'play' : 'pause'"
            :src="SongDetail.al.picUrl"
            alt=""
          />
        </div>
        <h3>
          {{ SongDetail.name }}<span>-{{ SongDetail.ar[0].name }}</span>
        </h3>
      </div>
      <!-- 播放按钮 -->
      <div class="playbutton">
        <div class="icon" @click="playing">
          <div class="playing" v-show="isplaying">
            <svg
              t="1657097796444"
              class="playicon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="1023"
              width="25"
              height="25"
            >
              <path
                d="M341.32992 731.37152a53.73952 53.73952 0 0 0 53.77024 53.69856h0.43008c18.8416 0 35.90144-7.59808 48.27136-19.99872l228.92544-228.74112a34.1504 34.1504 0 0 0 0-48.19968L443.36128 258.92864a68.096 68.096 0 0 0-48.27136-19.99872 53.69856 53.69856 0 0 0-53.77024 53.73952v438.70208z"
                p-id="1024"
              ></path>
            </svg>
          </div>
          <div class="pasue" v-show="!isplaying">
            <svg
              t="1657097848167"
              class="pasueicon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="1257"
              width="25"
              height="25"
            >
              <path
                d="M477.87008 716.8c0 37.5296-30.74048 68.27008-68.27008 68.27008h-68.27008c-37.5296 0-68.25984-30.74048-68.25984-68.27008V307.2c0-37.5296 30.73024-68.27008 68.25984-68.27008H409.6c37.5296 0 68.27008 30.74048 68.27008 68.27008v409.6zM750.92992 716.8c0 37.5296-30.73024 68.27008-68.25984 68.27008H614.4c-37.5296 0-68.27008-30.74048-68.27008-68.27008V307.2c0-37.5296 30.74048-68.27008 68.27008-68.27008h68.27008c37.5296 0 68.25984 30.74048 68.25984 68.27008v409.6z"
                p-id="1258"
                fill="#2c2c2c"
              ></path>
            </svg>
          </div>
        </div>
        <!-- 进度圈儿 -->
        <van-circle
          v-model="currentRate"
          :rate="rate"
          layer-color="#ebedf0"
          :color="gradientColor"
        />
        <!-- 更多按钮 -->
        <van-cell @click="show = true">
          <svg
            t="1657021462085"
            class="listicon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="957"
            width="32"
            height="32"
          >
            <path
              d="M608.352 442.176a64 64 0 0 1 33.92 9.728l163.648 102.272a64 64 0 0 1 0 108.544l-163.648 102.272a64 64 0 0 1-97.92-54.272v-204.544a64 64 0 0 1 64-64zM448 704a32 32 0 0 1 0 64H224a32 32 0 0 1 0-64h224z m160.352-197.824v204.544l163.648-102.272-163.648-102.272zM448 448a32 32 0 0 1 0 64H224a32 32 0 0 1 0-64h224z m352-256a32 32 0 0 1 0 64H224a32 32 0 1 1 0-64h576z"
              p-id="958"
              fill="#515151"
            ></path>
          </svg>
        </van-cell>
      </div>
    </div>
    <!-- 大播放器 -->
    <div class="bigPlayer" v-show="this.showBigPlayer" v-if="SongDetail">
      <!-- 背景图 -->
      <div
        class="backgroundImg"
        :style="{
          'background-image': 'url(' + this.SongbgImg + '?param=140y140)',
        }"
        v-show="!ShowCommentView"
      ></div>
      <!-- 大播放器视图 -->
      <div class="view" v-show="!ShowCommentView">
        <!-- 顶部 -->
        <div class="top">
          <div class="goback" @click="hidenBigPlayer">
            <svg
              t="1657249283148"
              class="icon"
              viewBox="0 0 1026 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="25433"
              width="24"
              height="24"
            >
              <path
                d="M1013.7 90.8C997.8 75.5 972.4 76 957.1 92L510.9 557.1 73.2 90.8C58 74.7 32.7 73.9 16.6 89 0.5 104.1-0.3 129.4 14.8 145.5l466.6 497.1 1.5 1.5c0.2 0.2 0.4 0.4 0.7 0.6 0.3 0.3 0.6 0.5 0.9 0.8 0.3 0.3 0.6 0.5 0.9 0.7 0.2 0.2 0.4 0.4 0.7 0.6 0.3 0.2 0.6 0.5 0.9 0.7 0.2 0.2 0.5 0.4 0.7 0.5l0.9 0.6c0.3 0.2 0.5 0.4 0.8 0.5 0.3 0.2 0.6 0.3 0.9 0.5 0.3 0.2 0.6 0.3 0.9 0.5 0.3 0.2 0.5 0.3 0.8 0.4 0.3 0.2 0.6 0.3 1 0.5 0.3 0.1 0.5 0.3 0.8 0.4 0.3 0.2 0.7 0.3 1 0.5 0.2 0.1 0.5 0.2 0.7 0.3 0.4 0.2 0.7 0.3 1.1 0.4 0.2 0.1 0.5 0.2 0.7 0.3 0.4 0.1 0.8 0.3 1.2 0.4 0.2 0.1 0.5 0.1 0.7 0.2l1.2 0.3c0.2 0.1 0.4 0.1 0.7 0.2 0.4 0.1 0.8 0.2 1.3 0.3 0.2 0 0.4 0.1 0.6 0.1 0.4 0.1 0.9 0.2 1.3 0.2 0.2 0 0.4 0.1 0.6 0.1 0.5 0.1 0.9 0.1 1.4 0.2 0.2 0 0.4 0 0.6 0.1 0.5 0 1 0.1 1.5 0.1h4.6c0.5 0 1-0.1 1.5-0.1 0.2 0 0.4 0 0.5-0.1 0.5 0 0.9-0.1 1.4-0.2 0.2 0 0.4-0.1 0.6-0.1 0.4-0.1 0.9-0.1 1.3-0.2 0.2 0 0.4-0.1 0.6-0.1l1.2-0.3c0.2-0.1 0.4-0.1 0.7-0.2l1.2-0.3c0.2-0.1 0.5-0.1 0.7-0.2 0.4-0.1 0.8-0.2 1.1-0.4 0.2-0.1 0.5-0.2 0.7-0.3 0.4-0.1 0.7-0.3 1.1-0.4 0.3-0.1 0.5-0.2 0.8-0.3 0.3-0.1 0.7-0.3 1-0.5 0.3-0.1 0.5-0.2 0.8-0.4 0.3-0.2 0.6-0.3 0.9-0.5 0.3-0.1 0.6-0.3 0.8-0.4 0.3-0.2 0.6-0.3 0.8-0.5 0.3-0.2 0.6-0.3 0.9-0.5 0.3-0.2 0.5-0.3 0.8-0.5l0.9-0.6c0.2-0.2 0.4-0.3 0.7-0.5 0.3-0.2 0.6-0.5 1-0.7 0.2-0.1 0.4-0.3 0.6-0.5 0.3-0.3 0.7-0.5 1-0.8 0.2-0.1 0.3-0.3 0.5-0.5 0.5-0.5 1-0.9 1.5-1.4l0.9-0.9 475.4-495.6c15.3-15.7 14.7-41.1-1.2-56.3z"
                fill="#ffffff"
                p-id="25434"
              ></path>
            </svg>
          </div>
          <div class="title">
            <h2>{{ SongDetail.name }}</h2>
            <p>{{ SongDetail.ar[0].name }}></p>
          </div>
          <!-- 分享 -->
          <div class="rightIcon">
            <div class="authorImg"></div>
            <div class="share">
              <van-cell @click="showShare = true">
                <svg
                  t="1657249338185"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="26475"
                  width="24"
                  height="24"
                >
                  <path
                    d="M763.84 896c-47.128 0-85.333-38.205-85.333-85.333s38.205-85.333 85.333-85.333c47.128 0 85.333 38.205 85.333 85.333 0 47.128-38.205 85.333-85.333 85.333M329.92 558.848c-14.895 26.231-42.641 43.638-74.453 43.638-47.128 0-85.333-38.205-85.333-85.333 0-16.097 4.457-31.152 12.204-44 14.935-24.769 42.098-41.333 73.13-41.333 47.128 0 85.333 38.205 85.333 85.333 0 15.317-4.035 29.691-11.101 42.117M763.84 128c47.128 0 85.333 38.205 85.333 85.333s-38.205 85.333-85.333 85.333c-47.128 0-85.333-38.205-85.333-85.333 0-47.128 38.205-85.333 85.333-85.333M763.84 682.667c-0.021 0-0.047 0-0.072 0-39.16 0-74.203 17.626-97.628 45.378l-289.885-167.063c4.932-13.101 7.787-28.245 7.787-44.055 0-0.105 0-0.209 0-0.314 0-0.072 0-0.177 0-0.281 0-15.81-2.855-30.953-8.077-44.942l295.544-169.566c23.265 24.363 56.001 39.509 92.275 39.509 0.020 0 0.039 0 0.059 0 70.689 0 127.997-57.308 127.997-128 0-70.692-57.308-128-128-128-70.692 0-128 57.308-128 128 0 18.965 4.224 36.907 11.627 53.099l-292.288 168.747c-23.653-28.833-59.285-47.084-99.18-47.084-70.692 0-128 57.308-128 128 0 0.188 0 0.376 0.001 0.564-0.001 0.123-0.001 0.304-0.001 0.484 0 70.692 57.308 128 128 128 39.895 0 75.526-18.251 99.001-46.86l289.373 166.752c-5.397 13.568-8.529 29.29-8.533 45.743 0 70.582 57.308 127.889 128 127.889 70.692 0 128-57.308 128-128 0-70.692-57.308-128-128-128z"
                    fill="#ffffff"
                    p-id="26476"
                  ></path>
                </svg>
              </van-cell>
            </div>
          </div>
        </div>
        <!-- 主体 -->
        <div class="content" @click="showLyrics">
          <!-- 唱针 -->
          <div
            class="stylus"
            :class="!this.isplaying ? 'isplaying' : 'ispause'"
            v-show="!this.onShowLyrics"
          >
            <img
              src="https://s3.music.126.net/mobile-new/img/needle-ab.png?4b81da043356110081e5ccaed2e6f2ad="
              alt=""
            />
          </div>
          <!-- 旋转唱片 -->
          <div
            class="record"
            :class="!isplaying ? 'play' : 'pause'"
            v-show="!onShowLyrics"
          >
            <div class="songImg">
              <img :src="SongDetail.al.picUrl" alt="" />
            </div>
          </div>
          <!-- 歌词 -->
          <div class="lyrics" v-show="onShowLyrics">
            <ul :style="{ top: SongLyricsTop + 'px' }">
              <li
                :class="{ active: currentRow == index }"
                v-for="(item, index) in SongLyrics"
                :key="index"
              >
                {{ item.text }}
              </li>
            </ul>
          </div>
        </div>
        <!-- 底部操作按钮 -->
        <div class="bottomButtons">
          <!-- 进度条上 -->
          <div class="behindRange">
            <!-- 喜欢 -->
            <div class="like" v-show="!likeThisSong" @click="likeThisSongFun">
              <svg
                t="1657178724411"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="2283"
                width="18"
                height="18"
              >
                <path
                  d="M700 192c92.8 0 166.4 72.8 166.4 166.4 0 129.6-133.6 251.2-336.8 435.2l-17.6 16-17.6-16C291.2 609.6 157.6 488 157.6 358.4c0-92.8 72.8-166.4 166.4-166.4 52.8 0 104.8 24 140 64.8l48.8 56.8 48.8-56.8c33.6-40 86.4-64.8 138.4-64.8m0-64c-72.8 0-142.4 33.6-188 87.2C466.4 162.4 396.8 128 324 128c-128.8 0-230.4 100.8-230.4 230.4 0 157.6 142.4 287.2 357.6 482.4L512 896l60.8-55.2c215.2-196 357.6-324.8 357.6-482.4 0-128.8-100.8-230.4-230.4-230.4z"
                  p-id="2284"
                  fill="#bfbfbf"
                ></path>
              </svg>
            </div>
            <div class="like" v-show="likeThisSong" @click="DonlikeThisSongFun">
              <svg
                t="1658086428848"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="3611"
                width="18"
                height="18"
              >
                <path
                  d="M512 896l-60.8-55.2C236 645.6 93.6 516 93.6 358.4 93.6 229.6 194.4 128 324 128c72.8 0 142.4 33.6 188 87.2C557.6 162.4 627.2 128 700 128c128.8 0 230.4 100.8 230.4 230.4 0 157.6-142.4 287.2-357.6 482.4L512 896z"
                  p-id="3612"
                  fill="#d81e06"
                ></path>
              </svg>
            </div>
            <!-- 下载 -->
            <!-- <div class="download">
              <svg
                t="1657178868590"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="7157"
                width="18"
                height="18"
              >
                <path
                  d="M490.155 696.835c5.703 5.703 13.229 8.617 20.753 8.496 7.524 0 15.050-2.791 20.875-8.496l179.739-179.739c11.408-11.408 11.408-29.855 0-41.142-5.703-5.703-13.107-8.496-20.631-8.496s-14.928 2.791-20.631 8.496l-130.222 130.222v-483.389c0-16.142-12.986-29.127-29.127-29.127s-29.127 12.986-29.127 29.127v483.267l-130.222-130.222c-5.703-5.703-13.107-8.496-20.631-8.496s-14.928 2.791-20.631 8.496c-11.408 11.408-11.408 29.855 0 41.142l179.86 179.86z"
                  fill="#bfbfbf"
                  p-id="7158"
                ></path>
                <path
                  d="M883.007 497.194c-16.142 0-29.127 12.986-29.127 29.127 0 189.084-153.767 342.85-342.85 342.85s-342.85-153.767-342.85-342.85c0-16.142-12.986-29.127-29.127-29.127s-29.127 12.986-29.127 29.127c0 54.128 10.559 106.678 31.554 156.194 20.146 47.818 49.152 90.658 85.925 127.553 36.773 36.773 79.735 65.778 127.553 85.925 49.516 20.875 102.066 31.554 156.194 31.554 54.128 0 106.678-10.559 156.194-31.554 47.818-20.146 90.658-49.152 127.553-85.925 36.773-36.773 65.778-79.735 85.925-127.553 20.875-49.516 31.554-102.066 31.554-156.194-0.242-16.020-13.349-29.127-29.37-29.127z"
                  fill="#bfbfbf"
                  p-id="7159"
                ></path>
              </svg>
            </div> -->
            <!-- 会员 -->
            <!-- <div class="vip">
              <svg
                t="1657179528514"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="13559"
                width="18"
                height="18"
              >
                <path
                  d="M683.195363 567.615469v349.144399h73.369442V789.975017c117.268312 1.739582 176.721095-3.479165 193.195962-103.55631 5.218747-29.265914-5.218747-62.113321-18.214449-80.123114-38.680124-52.392126-155.027481-39.396423-248.350955-38.680124zM756.564805 730.624563v-101.816728c54.438693-1.739582 112.049565-7.776956 121.566103 36.224243 15.656241 73.574098-60.373738 67.332068-121.566103 65.592485zM541.879884 569.355051c0.818627 115.52873 0.818627 231.876087 1.739582 347.404817h71.629859V567.615469c-24.149495 1.023284-48.401319 1.023284-73.369441 1.739582zM680.739482 102.123713c-113.072849 112.868192-225.838713 224.917758-339.730189 337.990607V102.123713H67.690217c0.818627 22.409913 0.818627 45.638453 1.739582 68.150695h66.411112v745.973818c271.579494-271.784151 542.340362-542.545018 813.919856-814.124513H680.739482z"
                  p-id="13560"
                  fill="#bfbfbf"
                ></path>
              </svg>
            </div> -->
            <!-- 评论 -->
            <div class="comment" @click="ShowCommentViewFun">
              <svg
                t="1657179682696"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="22096"
                width="18"
                height="18"
              >
                <path
                  d="M514.57 959.33H152.86l0.09-180.67C95.16 701.06 64.67 609.1 64.67 512 64.67 265.34 265.34 64.67 512 64.67S959.33 265.34 959.33 512c0 235.23-183.66 429.49-415.12 446.13v1.14l-29.64 0.06z m-302.4-59.3l302.21-0.06C727.03 898.68 900.03 724.65 900.03 512c0-213.96-174.07-388.03-388.03-388.03-213.96 0-388.04 174.07-388.04 388.03 0 87.21 28.36 169.66 82.01 238.42l6.28 8.05-0.08 141.56z"
                  p-id="22097"
                  fill="#bfbfbf"
                ></path>
                <path
                  d="M663.46 477.27h-310.1c-16.37 0-29.65-13.28-29.65-29.65 0-16.37 13.28-29.65 29.65-29.65h310.1c16.37 0 29.65 13.28 29.65 29.65 0 16.37-13.27 29.65-29.65 29.65zM538.74 636.8H353.37c-16.37 0-29.65-13.28-29.65-29.65S337 577.5 353.37 577.5h185.37c16.37 0 29.65 13.28 29.65 29.65s-13.28 29.65-29.65 29.65z"
                  p-id="22098"
                  fill="#bfbfbf"
                ></path>
              </svg>
            </div>
            <!-- 更多 -->
            <!-- <div class="more">
              <svg
                t="1657179754280"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="23209"
                width="18"
                height="18"
              >
                <path
                  d="M512 704c35.2 0 64 28.8 64 64s-28.8 64-64 64-64-28.8-64-64 28.8-64 64-64z m-64-192c0 35.2 28.8 64 64 64s64-28.8 64-64-28.8-64-64-64-64 28.8-64 64z m0-256c0 35.2 28.8 64 64 64s64-28.8 64-64-28.8-64-64-64-64 28.8-64 64z"
                  p-id="23210"
                  fill="#bfbfbf"
                ></path>
              </svg>
            </div> -->
          </div>
          <!-- 进度条 -->
          <div class="range">
            <div class="playingTime">{{ currentTime | currentTimefiller }}</div>
            <div class="range-in">
              <van-slider
                v-model="playingValue"
                button-size="5"
                inactive-color="rgb(109,109,101)"
                active-color="#FFC0CB"
                @input="onChange"
                @drag-start="sliderdragStart"
                @drag-end="sliderdragEnd"
              />
            </div>
            <div class="totalTime">{{ duration | durationTimefiller }}</div>
          </div>
          <!-- 进度条下 -->
          <div class="afterRange">
            <!-- 播放模式 -->
            <div class="playmodel">
              <svg
                t="1657185709585"
                class="icon"
                viewBox="0 0 1152 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="1926"
                width="18"
                height="18"
              >
                <path
                  d="M512 896a384 384 0 1 1 384-384 64 64 0 0 0 128 0 512 512 0 1 0-512 512 64 64 0 0 0 0-128z"
                  fill="#8a8a8a"
                  p-id="1927"
                ></path>
                <path
                  d="M877.248 466.752a64 64 0 0 0-90.496 90.496l128 128a64 64 0 0 0 90.496 0l128-128a64 64 0 1 0-90.496-90.496L960 549.504l-82.752-82.752z"
                  fill="#8a8a8a"
                  p-id="1928"
                ></path>
              </svg>
            </div>
            <!-- 上一首 -->
            <div class="prev" @click="prevFun">
              <svg
                t="1657185776836"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="2345"
                width="18"
                height="18"
              >
                <path
                  d="M792.645843 13.48362A63.9944 63.9944 0 0 1 895.932806 64.039197v895.921606a63.9944 63.9944 0 0 1-103.286963 50.555577l-575.949604-447.960804a63.9944 63.9944 0 0 1 0-101.111152l575.949604-447.960804zM767.944005 194.97174L360.235679 512 767.944005 829.092254v-634.184508z"
                  fill="#8a8a8a"
                  p-id="2346"
                ></path>
                <path
                  d="M128 128.033597v767.932806a63.9944 63.9944 0 0 0 127.988801 0V128.033597a63.9944 63.9944 0 1 0-127.988801 0z"
                  fill="#8a8a8a"
                  p-id="2347"
                ></path>
              </svg>
            </div>
            <!-- 播放按钮 -->
            <div class="playbutton" @click="playing">
              <div class="playing" v-show="isplaying">
                <svg
                  t="1657185992505"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="3046"
                  width="40"
                  height="40"
                >
                  <path
                    d="M512 0c282.763636 0 512 229.236364 512 512s-229.236364 512-512 512S0 794.763636 0 512 229.236364 0 512 0z m0 93.090909a418.909091 418.909091 0 1 0 0 837.818182 418.909091 418.909091 0 0 0 0-837.818182z"
                    fill="#8a8a8a"
                    p-id="3047"
                  ></path>
                  <path
                    d="M372.363636 698.181818a46.545455 46.545455 0 0 0 72.378182 38.725818l279.272727-186.181818a46.545455 46.545455 0 0 0 0-77.451636L445.253818 287.464727a46.452364 46.452364 0 0 0-8.517818-4.654545L431.941818 281.134545a46.638545 46.638545 0 0 0-27.834182 0.558546l-5.771636 2.327273a46.731636 46.731636 0 0 0-16.197818 13.172363l-2.001455 2.792728c-1.815273 2.699636-3.258182 5.492364-4.421818 8.378181l-1.489454 4.282182a46.359273 46.359273 0 0 0-1.675637 8.657455L372.363636 326.423273c0.232727 14.848 7.447273 29.323636 20.712728 38.167272L465.454545 412.765091V325.818182c0-13.963636-6.144-26.437818-15.825454-34.955637l-4.887273-3.770181a46.731636 46.731636 0 0 0-8.378182-4.421819l-4.282181-1.489454a46.545455 46.545455 0 0 0-28.858182 0.837818l-4.282182 1.768727a46.266182 46.266182 0 0 0-22.667636 23.365819l-2.048 5.585454a46.266182 46.266182 0 0 0-1.722182 9.122909L372.363636 326.469818V698.181818z m93.090909-285.370182L614.260364 512 465.454545 611.188364V412.858182z"
                    fill="#8a8a8a"
                    p-id="3048"
                  ></path>
                </svg>
              </div>
              <div class="pasue" v-show="!isplaying">
                <svg
                  t="1657186542118"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="3892"
                  width="40"
                  height="40"
                >
                  <path
                    d="M512 0c282.763636 0 512 229.236364 512 512s-229.236364 512-512 512S0 794.763636 0 512 229.236364 0 512 0z m0 93.090909a418.909091 418.909091 0 1 0 0 837.818182 418.909091 418.909091 0 0 0 0-837.818182z"
                    fill="#8a8a8a"
                    p-id="3893"
                  ></path>
                  <path
                    d="M325.818182 279.272727v465.454546a46.545455 46.545455 0 0 0 93.090909 0V279.272727a46.545455 46.545455 0 1 0-93.090909 0zM605.090909 279.272727v465.454546a46.545455 46.545455 0 0 0 93.090909 0V279.272727a46.545455 46.545455 0 0 0-93.090909 0z"
                    fill="#8a8a8a"
                    p-id="3894"
                  ></path>
                </svg>
              </div>
            </div>
            <!-- 下一首 -->
            <div class="next" @click="nextFun">
              <svg
                t="1657186020694"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="3315"
                width="16"
                height="16"
              >
                <path
                  d="M128 64.039197A63.9944 63.9944 0 0 1 231.286962 13.48362l575.949605 447.960804a63.9944 63.9944 0 0 1 0 101.111152l-575.949605 447.960804A63.9944 63.9944 0 0 1 128 959.960803V64.039197z m127.988801 130.868549v634.184508L663.697127 512 255.988801 194.907746z"
                  fill="#8a8a8a"
                  p-id="3316"
                ></path>
                <path
                  d="M767.944005 128.033597v767.932806a63.9944 63.9944 0 0 0 127.988801 0V128.033597a63.9944 63.9944 0 0 0-127.988801 0z"
                  fill="#8a8a8a"
                  p-id="3317"
                ></path>
              </svg>
            </div>
            <!-- 播放列表 -->
            <div class="playlists">
              <van-cell @click="show = true">
                <svg
                  t="1657186085797"
                  class="icon"
                  viewBox="0 0 1185 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="3578"
                  width="18"
                  height="18"
                >
                  <path
                    d="M0 53.894737A53.894737 53.894737 0 0 1 81.596632 7.706947l269.473684 161.684211a53.894737 53.894737 0 0 1 0 92.375579l-269.473684 161.68421A53.894737 53.894737 0 0 1 0 377.263158V53.894737z m107.789474 228.190316L218.597053 215.578947 107.789474 149.072842v133.012211zM53.894737 646.736842h1077.894737a53.894737 53.894737 0 0 0 0-107.789474H53.894737a53.894737 53.894737 0 1 0 0 107.789474zM53.894737 1024h1077.894737a53.894737 53.894737 0 0 0 0-107.789474H53.894737a53.894737 53.894737 0 0 0 0 107.789474zM485.052632 269.473684h646.736842a53.894737 53.894737 0 0 0 0-107.789473H485.052632a53.894737 53.894737 0 1 0 0 107.789473z"
                    fill="#8a8a8a"
                    p-id="3579"
                  ></path>
                </svg>
              </van-cell>
            </div>
          </div>
        </div>
      </div>
      <!-- 评论视图 -->
      <div class="commentView" v-if="ShowCommentView">
        <!-- 顶部 -->
        <div class="title">
          <div class="nav">
            <div class="left">
              <div class="goback" @click="closeCommentViewFun">
                <svg
                  t="1657540968052"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="2255"
                  width="24"
                  height="24"
                >
                  <path
                    d="M729.6 931.2l-416-425.6 416-416c9.6-9.6 9.6-25.6 0-35.2-9.6-9.6-25.6-9.6-35.2 0l-432 435.2c-9.6 9.6-9.6 25.6 0 35.2l432 441.6c9.6 9.6 25.6 9.6 35.2 0C739.2 956.8 739.2 940.8 729.6 931.2z"
                    p-id="2256"
                    fill="#515151"
                  ></path>
                </svg>
              </div>
              <div class="titleText">
                <h2>评论({{ songComment.total }})</h2>
              </div>
            </div>
            <div class="right">
              <div class="share">
                <van-cell @click="showShare = true">
                  <svg
                    t="1657541132697"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="3379"
                    width="24"
                    height="24"
                  >
                    <path
                      d="M768.73106 703.537712c-35.606921 0-67.945574 14.793214-91.167479 38.359147l-309.109357-171.670082c9.116748-17.545439 14.621199-37.155048 14.621199-58.312783 0-12.55703-2.408198-24.426004-5.676466-35.950949l304.63699-189.215522c22.705863 20.469679 52.464304 33.198723 85.146985 33.198723 70.525785 0 127.978498-57.452713 127.978498-127.978498S837.708718 63.989249 767.182933 63.989249s-127.978498 57.452713-127.978498 127.978498c0 14.621199 2.92424 28.382328 7.396607 41.455401L344.716278 420.746514c-23.049891-22.705863-54.700487-36.983034-89.791366-36.983034-70.525785 0-127.978498 57.452713-127.978498 127.978498s57.452713 127.978498 127.978498 127.978498c25.630102 0 49.540064-7.740635 69.493701-20.813707l321.150344 178.378633c-3.096254 11.008903-5.160423 22.18982-5.160423 34.058794 0 70.525785 57.452713 127.978498 127.978498 127.978498s127.978498-57.452713 127.978498-127.978498S839.256845 703.537712 768.73106 703.537712zM767.182933 127.978498c35.262893 0 63.989249 28.726356 63.989249 63.989249s-28.726356 63.989249-63.989249 63.989249-63.989249-28.726356-63.989249-63.989249S731.92004 127.978498 767.182933 127.978498zM191.107677 511.913993c0-35.262893 28.726356-63.989249 63.989249-63.989249s63.989249 28.726356 63.989249 63.989249-28.726356 63.989249-63.989249 63.989249S191.107677 547.176886 191.107677 511.913993zM768.73106 895.505459c-35.262893 0-63.989249-28.726356-63.989249-63.989249s28.726356-63.989249 63.989249-63.989249 63.989249 28.726356 63.989249 63.989249C832.720309 866.951117 803.993953 895.505459 768.73106 895.505459z"
                      p-id="3380"
                      fill="#515151"
                    ></path>
                  </svg>
                </van-cell>
              </div>
            </div>
          </div>
          <div class="songDetails">
            <div class="left">
              <div class="title" @click="closeCommentViewFun">
                <!-- 唱片儿 -->
                <div class="img">
                  <img :src="SongDetail.al.picUrl" />
                </div>
                <h3>
                  {{ SongDetail.name }}<span>-{{ SongDetail.ar[0].name }}</span
                  >·<span style="color: red">关注</span>
                </h3>
              </div>
            </div>
            <div class="right">
              <svg
                t="1657543264511"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="4609"
                width="16"
                height="16"
              >
                <path
                  d="M249.6 723.2c19.2 0 38.4 0 64-6.4h12.8c51.2 44.8 115.2 76.8 192 76.8 153.6 0 275.2-121.6 275.2-275.2 0-12.8 0-32-6.4-44.8l19.2-19.2c57.6-57.6 76.8-108.8 57.6-147.2-19.2-38.4-89.6-44.8-192-19.2-44.8-38.4-96-51.2-153.6-51.2-153.6 0-281.6 121.6-281.6 275.2v6.4c-70.4 70.4-96 128-76.8 166.4 12.8 25.6 44.8 38.4 89.6 38.4z m268.8 32c-57.6 0-108.8-19.2-147.2-51.2 64-19.2 140.8-44.8 211.2-89.6 70.4-38.4 128-76.8 179.2-121.6V512c-6.4 134.4-115.2 243.2-243.2 243.2z m332.8-441.6c12.8 25.6-6.4 70.4-57.6 128l-6.4 6.4c-19.2-64-51.2-115.2-96-153.6 83.2-19.2 140.8-12.8 160 19.2z m-332.8-44.8c121.6 0 224 89.6 236.8 204.8-51.2 44.8-115.2 89.6-185.6 128-76.8 38.4-153.6 70.4-217.6 89.6-51.2-44.8-76.8-108.8-76.8-179.2 0-134.4 108.8-243.2 243.2-243.2zM236.8 544c6.4 57.6 32 115.2 70.4 153.6-70.4 12.8-115.2 6.4-134.4-19.2-12.8-32 12.8-76.8 64-134.4z"
                  p-id="4610"
                  fill="#1296db"
                ></path>
              </svg>
              TA的圈子
            </div>
          </div>
        </div>
        <!-- 主体评论区 -->
        <div class="content">
          <div class="nav">
            <div class="left"><h2>评论区</h2></div>
            <div class="right">
              <div
                class="recommend"
                :class="newComment ? 'active' : ''"
                @click="showNewComment"
              >
                最新
              </div>
              |
              <div
                class="hot"
                :class="!newComment ? 'active' : ''"
                @click="showHotComment"
              >
                最热
              </div>
            </div>
          </div>
          <!-- 最新 -->
          <div class="newContent" v-show="newComment">
            <van-loading v-if="!songComment.comments" />
            <ul v-if="songComment.comments">
              <li v-for="(item, index) in songComment.comments" :key="index">
                <!-- 用户信息 -->
                <div class="top">
                  <!-- 左用户信息 -->
                  <div class="left">
                    <div class="avatar">
                      <img :src="item.user.avatarUrl" alt="" />
                      <div class="userInfos">
                        <div class="name">
                          {{ item.user.nickname }}

                          <div class="time">
                            {{ item.timeStr }}
                          </div>
                        </div>

                        <div class="vip">
                          <img
                            src="https://p6.music.126.net/obj/wo3DlcOGw6DClTvDisK1/4213923139/f08a/c6ea/10ee/f7e2deef21937a1042e370c47525c956.png"
                            alt=""
                          />
                        </div>
                      </div>
                    </div>
                  </div>
                  <!-- 点赞 -->
                  <div class="right">
                    {{ item.likedCount }}
                    <div
                      class="like"
                      v-show="item.liked"
                      @click="unlikeFun(item.commentId)"
                    >
                      <svg
                        t="1657549142428"
                        class="icon"
                        viewBox="0 0 1024 1024"
                        version="1.1"
                        xmlns="http://www.w3.org/2000/svg"
                        p-id="2544"
                        width="16"
                        height="16"
                      >
                        <path
                          d="M621.674667 408.021333c16.618667-74.24 28.224-127.936 34.837333-161.194666C673.152 163.093333 629.941333 85.333333 544.298667 85.333333c-77.226667 0-116.010667 38.378667-138.88 115.093334l-0.586667 2.24c-13.728 62.058667-34.72 110.165333-62.506667 144.586666a158.261333 158.261333 0 0 1-119.733333 58.965334l-21.909333 0.469333C148.437333 407.808 106.666667 450.816 106.666667 503.498667V821.333333c0 64.8 52.106667 117.333333 116.394666 117.333334h412.522667c84.736 0 160.373333-53.568 189.12-133.92l85.696-239.584c21.802667-60.96-9.536-128.202667-70.005333-150.186667a115.552 115.552 0 0 0-39.488-6.954667H621.674667z"
                          p-id="2545"
                          fill="#d81e06"
                        ></path>
                      </svg>
                    </div>
                    <div
                      class="unlike"
                      v-show="!item.liked"
                      @click="likeFun(item.commentId)"
                    >
                      <svg
                        t="1657549113406"
                        class="icon"
                        viewBox="0 0 1024 1024"
                        version="1.1"
                        xmlns="http://www.w3.org/2000/svg"
                        p-id="2293"
                        width="16"
                        height="16"
                      >
                        <path
                          d="M621.674667 408.021333c16.618667-74.24 28.224-127.936 34.837333-161.194666C673.152 163.093333 629.941333 85.333333 544.298667 85.333333c-77.226667 0-116.010667 38.378667-138.88 115.093334l-0.586667 2.24c-13.728 62.058667-34.72 110.165333-62.506667 144.586666a158.261333 158.261333 0 0 1-119.733333 58.965334l-21.909333 0.469333C148.437333 407.808 106.666667 450.816 106.666667 503.498667V821.333333c0 64.8 52.106667 117.333333 116.394666 117.333334h412.522667c84.736 0 160.373333-53.568 189.12-133.92l85.696-239.584c21.802667-60.96-9.536-128.202667-70.005333-150.186667a115.552 115.552 0 0 0-39.488-6.954667H621.674667zM544.256 149.333333c39.253333 0 59.498667 36.48 49.888 84.928-7.573333 38.144-21.984 104.426667-43.221333 198.666667-4.512 20.021333 10.56 39.093333 30.912 39.093333h218.666666c6.101333 0 12.16 1.066667 17.909334 3.168 27.445333 9.984 41.674667 40.554667 31.776 68.266667l-85.568 239.573333C744.981333 838.026667 693.301333 874.666667 635.402667 874.666667H223.498667C194.314667 874.666667 170.666667 850.784 170.666667 821.333333V503.498667c0-17.866667 14.144-32.448 31.829333-32.821334l21.866667-0.469333a221.12 221.12 0 0 0 167.381333-82.56c34.346667-42.602667 59.146667-99.306667 74.869333-169.877333C482.101333 166.336 499.552 149.333333 544.266667 149.333333z"
                          p-id="2294"
                          fill="#515151"
                        ></path>
                      </svg>
                    </div>
                  </div>
                </div>
                <!-- 评论文本 -->
                <div class="content">
                  {{ item.content }}
                </div>
              </li>
            </ul>
          </div>
          <!-- 最热 -->
          <div class="hotConent" v-show="!newComment">
            <van-loading v-if="!songComment.hotComments" />
            <ul v-if="songComment.hotComments">
              <li v-for="(item, index) in songComment.hotComments" :key="index">
                <!-- 用户信息 -->
                <div class="top">
                  <!-- 左用户信息 -->
                  <div class="left">
                    <div class="avatar">
                      <img :src="item.user.avatarUrl" alt="" />
                      <div class="userInfos">
                        <div class="name">
                          {{ item.user.nickname }}

                          <div class="time">
                            {{ item.timeStr }}
                          </div>
                        </div>

                        <div class="vip">
                          <img
                            src="https://p6.music.126.net/obj/wo3DlcOGw6DClTvDisK1/4213923139/f08a/c6ea/10ee/f7e2deef21937a1042e370c47525c956.png"
                            alt=""
                          />
                        </div>
                      </div>
                    </div>
                  </div>
                  <!-- 点赞 -->
                  <div class="right">
                    {{ item.likedCount }}
                    <div
                      class="like"
                      v-show="item.liked"
                      @click="unlikeFun(item.commentId)"
                    >
                      <svg
                        t="1657549142428"
                        class="icon"
                        viewBox="0 0 1024 1024"
                        version="1.1"
                        xmlns="http://www.w3.org/2000/svg"
                        p-id="2544"
                        width="16"
                        height="16"
                      >
                        <path
                          d="M621.674667 408.021333c16.618667-74.24 28.224-127.936 34.837333-161.194666C673.152 163.093333 629.941333 85.333333 544.298667 85.333333c-77.226667 0-116.010667 38.378667-138.88 115.093334l-0.586667 2.24c-13.728 62.058667-34.72 110.165333-62.506667 144.586666a158.261333 158.261333 0 0 1-119.733333 58.965334l-21.909333 0.469333C148.437333 407.808 106.666667 450.816 106.666667 503.498667V821.333333c0 64.8 52.106667 117.333333 116.394666 117.333334h412.522667c84.736 0 160.373333-53.568 189.12-133.92l85.696-239.584c21.802667-60.96-9.536-128.202667-70.005333-150.186667a115.552 115.552 0 0 0-39.488-6.954667H621.674667z"
                          p-id="2545"
                          fill="#d81e06"
                        ></path>
                      </svg>
                    </div>
                    <div
                      class="unlike"
                      v-show="!item.liked"
                      @click="likeFun(item.commentId)"
                    >
                      <svg
                        t="1657549113406"
                        class="icon"
                        viewBox="0 0 1024 1024"
                        version="1.1"
                        xmlns="http://www.w3.org/2000/svg"
                        p-id="2293"
                        width="16"
                        height="16"
                      >
                        <path
                          d="M621.674667 408.021333c16.618667-74.24 28.224-127.936 34.837333-161.194666C673.152 163.093333 629.941333 85.333333 544.298667 85.333333c-77.226667 0-116.010667 38.378667-138.88 115.093334l-0.586667 2.24c-13.728 62.058667-34.72 110.165333-62.506667 144.586666a158.261333 158.261333 0 0 1-119.733333 58.965334l-21.909333 0.469333C148.437333 407.808 106.666667 450.816 106.666667 503.498667V821.333333c0 64.8 52.106667 117.333333 116.394666 117.333334h412.522667c84.736 0 160.373333-53.568 189.12-133.92l85.696-239.584c21.802667-60.96-9.536-128.202667-70.005333-150.186667a115.552 115.552 0 0 0-39.488-6.954667H621.674667zM544.256 149.333333c39.253333 0 59.498667 36.48 49.888 84.928-7.573333 38.144-21.984 104.426667-43.221333 198.666667-4.512 20.021333 10.56 39.093333 30.912 39.093333h218.666666c6.101333 0 12.16 1.066667 17.909334 3.168 27.445333 9.984 41.674667 40.554667 31.776 68.266667l-85.568 239.573333C744.981333 838.026667 693.301333 874.666667 635.402667 874.666667H223.498667C194.314667 874.666667 170.666667 850.784 170.666667 821.333333V503.498667c0-17.866667 14.144-32.448 31.829333-32.821334l21.866667-0.469333a221.12 221.12 0 0 0 167.381333-82.56c34.346667-42.602667 59.146667-99.306667 74.869333-169.877333C482.101333 166.336 499.552 149.333333 544.266667 149.333333z"
                          p-id="2294"
                          fill="#515151"
                        ></path>
                      </svg>
                    </div>
                  </div>
                </div>
                <!-- 评论文本 -->
                <div class="content">
                  {{ item.content }}
                </div>
              </li>
            </ul>
          </div>
        </div>
        <!-- 发表评论 -->
        <div class="sendComment" @click="isLogin">
          <div class="leftInput">
            <input
              type="text"
              v-model="keywords"
              placeholder="说点什么吧，也许她都听得到呢"
            />
          </div>
          <div class="rightbutton" @click="SentSongCommentFun(keywords)">
            发送
          </div>
        </div>
      </div>
    </div>
    <!-- 迷你歌单 -->
    <van-action-sheet v-model="show" @select="onSelect2">
      <h3>当前播放</h3>
      <div class="top">
        <div class="playModel">
          <span>
            <svg
              t="1657185709585"
              class="icon"
              viewBox="0 0 1152 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="1926"
              width="18"
              height="18"
            >
              <path
                d="M512 896a384 384 0 1 1 384-384 64 64 0 0 0 128 0 512 512 0 1 0-512 512 64 64 0 0 0 0-128z"
                fill="#8a8a8a"
                p-id="1927"
              ></path>
              <path
                d="M877.248 466.752a64 64 0 0 0-90.496 90.496l128 128a64 64 0 0 0 90.496 0l128-128a64 64 0 1 0-90.496-90.496L960 549.504l-82.752-82.752z"
                fill="#8a8a8a"
                p-id="1928"
              ></path>
            </svg> </span
          >列表循环
        </div>
        <div class="rightButton">
          <div class="download">
            <svg
              t="1657284811284"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="3939"
              width="18"
              height="18"
            >
              <path
                d="M490.155 696.835c5.703 5.703 13.229 8.617 20.753 8.496 7.524 0 15.050-2.791 20.875-8.496l179.739-179.739c11.408-11.408 11.408-29.855 0-41.142-5.703-5.703-13.107-8.496-20.631-8.496s-14.928 2.791-20.631 8.496l-130.222 130.222v-483.389c0-16.142-12.986-29.127-29.127-29.127s-29.127 12.986-29.127 29.127v483.267l-130.222-130.222c-5.703-5.703-13.107-8.496-20.631-8.496s-14.928 2.791-20.631 8.496c-11.408 11.408-11.408 29.855 0 41.142l179.86 179.86z"
                fill="#515151"
                p-id="3940"
              ></path>
              <path
                d="M883.007 497.194c-16.142 0-29.127 12.986-29.127 29.127 0 189.084-153.767 342.85-342.85 342.85s-342.85-153.767-342.85-342.85c0-16.142-12.986-29.127-29.127-29.127s-29.127 12.986-29.127 29.127c0 54.128 10.559 106.678 31.554 156.194 20.146 47.818 49.152 90.658 85.925 127.553 36.773 36.773 79.735 65.778 127.553 85.925 49.516 20.875 102.066 31.554 156.194 31.554 54.128 0 106.678-10.559 156.194-31.554 47.818-20.146 90.658-49.152 127.553-85.925 36.773-36.773 65.778-79.735 85.925-127.553 20.875-49.516 31.554-102.066 31.554-156.194-0.242-16.020-13.349-29.127-29.37-29.127z"
                fill="#515151"
                p-id="3941"
              ></path>
            </svg>
          </div>
          <div class="add">
            <svg
              t="1657243005099"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="20572"
              width="19"
              height="19"
            >
              <path
                d="M802.19 923.46H221.81c-66.67 0-120.9-54.24-120.9-120.9V222.19c0-66.67 54.24-120.9 120.9-120.9h580.37c66.67 0 120.9 54.24 120.9 120.9v66.2c0 16.02-12.98 29-29 29s-29-12.98-29-29v-66.2c0-34.68-28.22-62.9-62.9-62.9H221.81c-34.68 0-62.9 28.22-62.9 62.9v580.37c0 34.68 28.22 62.9 62.9 62.9h580.37c34.68 0 62.9-28.22 62.9-62.9V423.78c0-16.02 12.98-29 29-29s29 12.98 29 29v378.79c0.01 66.66-54.23 120.89-120.89 120.89z"
                p-id="20573"
                fill="#515151"
              ></path>
              <path
                d="M715.28 541.38H308.72c-16.02 0-29-12.98-29-29s12.98-29 29-29h406.56c16.02 0 29 12.98 29 29 0 16.01-12.99 29-29 29z"
                p-id="20574"
                fill="#515151"
              ></path>
              <path
                d="M512 744.65c-16.02 0-29-12.98-29-29V309.1c0-16.02 12.98-29 29-29s29 12.98 29 29v406.56c0 16.01-12.98 28.99-29 28.99z"
                p-id="20575"
                fill="#515151"
              ></path>
            </svg>
          </div>
          <div class="del">
            <svg
              t="1657284866628"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="4973"
              width="18"
              height="18"
            >
              <path
                d="M797.536 356V824a102.496 102.496 0 0 1-100.912 104H343.392a102.496 102.496 0 0 1-100.928-104V356A51.2 51.2 0 0 1 192 304v-52a51.2 51.2 0 0 1 50.464-52h151.392V148A51.2 51.2 0 0 1 444.304 96h151.392a51.2 51.2 0 0 1 50.464 52v52h151.392A51.2 51.2 0 0 1 848 252V304a51.2 51.2 0 0 1-50.464 52zM292.928 824a51.2 51.2 0 0 0 50.464 52h353.232a51.2 51.2 0 0 0 50.464-52V356H292.928V824z m302.768-650a25.6 25.6 0 0 0-25.232-26h-100.928a25.6 25.6 0 0 0-25.232 26V200h151.392v-26z m176.608 78H267.696a26.016 26.016 0 0 0 0 52h504.608a26.016 26.016 0 0 0 0-52z m-378.464 208a25.6 25.6 0 0 1 25.232 26v312a25.248 25.248 0 1 1-50.464 0v-312a25.6 25.6 0 0 1 25.232-26z m126.16 0a25.6 25.6 0 0 1 25.232 26v312a25.248 25.248 0 1 1-50.464 0v-312A25.6 25.6 0 0 1 520 460z m126.16 0a25.6 25.6 0 0 1 25.232 26v312a25.248 25.248 0 1 1-50.464 0v-312a25.6 25.6 0 0 1 25.232-26z"
                p-id="4974"
                fill="#515151"
              ></path>
            </svg>
          </div>
        </div>
      </div>
      <ul>
        <li v-if="this.playlist == ''">还未获取歌单，点个歌单吧~</li>
        <li v-for="(item, index) in this.playlist" :key="index">
          <div class="leftData" @click="getSongId(item)">
            <h3>{{ item.name }}</h3>
            <h5>-{{ item.ar[0].name }}</h5>
          </div>
          <div class="del" @click="delSong(index)">
            <svg
              t="1657333247283"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="2333"
              width="16"
              height="16"
            >
              <path
                d="M557.3 512l329.3-329.4a32 32 0 1 0-45.2-45.2L512 466.7 182.6 137.4a32 32 0 1 0-45.2 45.2L466.7 512 137.4 841.4a31.9 31.9 0 0 0 0 45.2 31.9 31.9 0 0 0 45.2 0L512 557.3l329.4 329.3a31.9 31.9 0 0 0 45.2 0 31.9 31.9 0 0 0 0-45.2z"
                fill="#515151"
                p-id="2334"
              ></path>
            </svg>
          </div>
        </li>
      </ul>
    </van-action-sheet>
    <!-- 分享页面 -->
    <van-share-sheet
      class="share"
      v-model="showShare"
      :options="options"
      title="立即将歌曲分享给好友"
      :description="description"
      style="height: 262px"
    />
    <!-- 音乐 -->
    <audio
      :src="SongUrl163"
      controls
      ref="audio"
      v-show="false"
      @timeupdate="timeupdateFun"
      @loadeddata="loadeddataFun"
    ></audio>
  </div>
</template>

<script>
//这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)
//例如:import 《组件名称》 from '《组件路径》';
import Vue from "vue";
import { ShareSheet, Toast } from "vant";
Vue.use(ShareSheet).use(Toast);
import {
  getsongDetail,
  //getsongUrl,
  getSongLyrics,
  getSongComment,
  SentSongComment,
  like,
  likeSong,
} from "../../api/miniplayer";
import { getdailyRecommendSongList } from "../../api/dailyrecommendsonglist";
import { getPlaylistDetail } from "../../api/song";
export default {
  //import引入的组件需要注入到对象中才能使用
  props: [
    "playerId",
    "listId",
    "miniList",
    "lent-player-close",
    "lent-player-show",
  ],
  components: {},
  data() {
    //这里存放数据
    return {
      showplayer: true,
      show: false,
      actions: [{ name: "选项一" }, { name: "选项二" }, { name: "选项三" }],
      showShare: false,
      description: "",
      options: [
        { name: "微信", icon: "wechat" },
        { name: "微博", icon: "weibo" },
        { name: "复制链接", icon: "link" },
        { name: "分享海报", icon: "poster" },
        { name: "二维码", icon: "qrcode" },
      ],
      rate: 0,
      currentRate: 0,
      gradientColor: {
        "0%": "#FFC0CB",
        "100%": "pink",
      },
      SongDetail: null,
      SongUrl: "",
      SongUrl163: "",
      isplaying: false,
      showBigPlayer: false,
      playingValue: 0,
      currentTime: 0,
      duration: 0,
      SongbgImg: "",
      playlist: "",
      onShowLyrics: false,
      SongLyrics: [],
      SongLyricsTop: 210,
      currentRow: 0,
      miniListPlayerId: null,
      ShowCommentView: false,
      songComment: "",
      newComment: true,
      keywords: null,
      likeThisSong: false,
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    playerId: function () {
      this.getsongDetailFun();
      /* console.log("切换音乐", this.playerId); */
      console.log("歌曲加载中...");
      this.getsongUrlFun();
      this.isplaying = true;
      this.rate = 0;
      this.getSongLyricsFun();
      this.getSongCommentFun();
      console.log(this.listId);
      /* 获取歌单 */
      if (this.listId == undefined || null) {
        this.getdailyRecommendSongListFun();
        console.log(this.listId, "播放推荐歌单");
        console.log(typeof Number(this.listId));
      } else {
        getPlaylistDetail({ id: this.listId }).then((data) => {
          console.log(this.listId, "本歌单Id");
          console.log(typeof Number(this.listId));
          this.playlist = data.playlist.tracks;
        });
      }
      this.likeThisSong = false;
    },
    /* 获取歌单方法 */
    /* listId: function () {
      if(this.listId== ''){
        console.log('无');
      }else{
      getPlaylistDetail({ id: this.listId }).then((data) => {
        console.log(this.listId,'歌单Id');
        this.playlist = data.playlist.tracks;
        console.log(this.playlist, "歌单");
      });
      }
    }, */
    // miniListPlayerId: function () {
    //   this.getsongDetailFun();
    //   /* 播放地址 */
    //   getsongUrl({ id: this.miniListPlayerId.id }).then((data) => {
    //     this.SongUrl = data.data.url;
    //     console.log(data);
    //     this.SongUrl163 =
    //       "https://music.163.com/song/media/outer/url?id=" + this.miniListPlayerId.id + ".mp3";
    //     /* console.log("接口地址", this.SongUrl);
    //     console.log("接口数据", data.data); */
    //     console.log("mini网易云地址", this.SongUrl163);
    //   });
    //     this.rate = 0;
    //   /* 歌词 */
    //   getSongLyrics({ id: this.miniListPlayerId.id }).then((data) => {
    //     /* console.log(data.lrc.lyric); */
    //     this.formatLyric(data.lrc.lyric);
    //   });
    //   console.log("歌曲加载中...");
    // },
    keywords: function () {
      console.log("评论区输入框", this.keywords);
    },
  },
  //方法集合
  methods: {
    /* 获取歌曲详情数据方法 */
    getsongDetailFun() {
      getsongDetail({ ids: this.playerId }).then((data) => {
        this.SongDetail = data.songs[0];
        console.log("songDetail", this.SongDetail);
        this.SongbgImg = this.SongDetail.al.picUrl;
        this.description =
          this.SongDetail.name + "-" + this.SongDetail.ar[0].name;
      });
    },
    /* 获取歌曲地址方法 */
    getsongUrlFun() {
      console.log("1、执行getsongUrl方法");
      this.SongUrl163 =
        "https://music.163.com/song/media/outer/url?id=" +
        this.playerId +
        ".mp3";
      /* getsongUrl({ id: this.playerId }).then((data) => {
        console.log('2、执行到内部,歌曲id:',this.playerId);
        console.log("3、返回的数据data:",data);
        //console.log("网易云地址", this.SongUrl163);
        //this.SongUrl = data.data[0].url;
        //console.log("2、接口地址:", this.SongUrl);
        //console.log("接口数据", data.data);
      }); */
    },
    /* 播放方法 */
    playing() {
      Toast("歌曲加载中♪...");
      if (this.isplaying) {
        this.$refs.audio.play();
      } else {
        this.$refs.audio.pause();
      }
      this.isplaying = !this.isplaying;
    },
    /* 进度条方法 */
    timeupdateFun() {
      /* 进度环 */
      this.currentTime = this.$refs.audio.currentTime;
      this.rate = (this.currentTime / this.duration) * 100;
      this.playingValue = (this.currentTime / this.duration) * 100;
      /* 歌词移动效果 */
      this.lyrictopPlay();
      if (this.rate >= 100) {
        this.nextFun();
      }
    },
    /* 歌词移动方法 */
    lyrictopPlay() {
      let heightTop = 210;
      for (let i = 0; i < this.SongLyrics.length; i++) {
        heightTop = heightTop - 36 * this.SongLyrics[i].height;
        if (this.currentTime <= this.SongLyrics[i].time) {
          this.SongLyricsTop = heightTop;
          this.currentRow = i - 1;
          break;
        }
      }
    },
    /* 显示大播放器方法 */
    showbigplayer() {
      this.showBigPlayer = true;
      this.hideLyrics();
    },
    /* 隐藏大播放器方法 */
    hidenBigPlayer() {
      this.showBigPlayer = false;
    },
    /* 进度条拖动进度方法 */
    onChange(value) {
      let playtimes = (value / 100) * this.duration;
      this.currentTime = playtimes;
      this.$refs.audio.currentTime = playtimes;
      /* console.log(value); */
    },
    /*  歌曲加载完成方法 */
    loadeddataFun() {
      this.duration = this.$refs.audio.duration;
      /* 自动播放 */
      this.playing();
      console.log("加载完成,开始播放音乐");
    },
    /* 拖动暂停方法 */
    sliderdragStart() {
      this.$refs.audio.pause();
    },
    /* 拖动完继续播放方法 */
    sliderdragEnd() {
      this.$refs.audio.play();
    },
    /* 下一首方法 */
    nextFun() {
      let index = this.playlist.findIndex((item) => item.id == this.playerId);
      index = index >= this.playlist.length - 1 ? 0 : index + 1;
      /* 初始化播放器的数据 */
      this.$emit("get-player-id", this.playlist[index].id);
      console.log("下一首下标", index);
    },
    /* 上一首方法 */
    prevFun() {
      let index = this.playlist.findIndex((item) => item.id == this.playerId);
      index = index <= 0 ? 19 : index - 1;
      /* 初始化播放器的数据 */
      this.$emit("get-player-id", this.playlist[index].id);
      console.log("上一首下标", index);
    },
    /* 显示歌词方法 */
    showLyrics() {
      this.onShowLyrics = !this.onShowLyrics;
      console.log("显示歌词", this.onShowLyrics);
    },
    /* 隐藏歌词方法 */
    hideLyrics() {
      this.onShowLyrics = false;
      console.log("显示歌词", this.onShowLyrics);
    },
    /* 获取歌词方法 */
    getSongLyricsFun() {
      getSongLyrics({ id: this.playerId }).then((data) => {
        /* console.log(data.lrc.lyric); */
        this.formatLyric(data.lrc.lyric);
      });
    },
    /* 切割歌词方法 */
    formatLyric(text) {
      this.SongLyrics = [];
      /* 切割歌词 */
      let arr = text.split("\n");
      let row = arr.length;
      for (let i = 0; i < row; i++) {
        let temp_row = arr[i];
        let temp_arr = temp_row.split("]");
        let obj = {};
        if (temp_arr[0]) {
          let time_arr = temp_arr[0]
            .substring(1, temp_arr[0].length - 1)
            .split(":");
          let s = time_arr[0] * 60 + Number(time_arr[1]); //得到秒
          obj.text = temp_arr[1]; //歌词
          obj.time = s; //时间
          obj.height = temp_arr[1].length > 47 ? 2 : 1;
          if (temp_arr[1].length) {
            this.SongLyrics.push(obj);
          }
        }
      }
      /* console.log(this.SongLyrics, "处理后数据"); */
    },
    /* 分享方法 */
    onSelect(option) {
      Toast(option.name);
      this.showShare = false;
      console.log();
    },
    /* 迷你播放器更多歌单方法 */
    onSelect2(item) {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      this.show = false;
      Toast(item.name);
      console.log("点击了显示小歌单");
      getPlaylistDetail({ id: this.listId }).then((data) => {
        this.playlist = data.playlist.tracks;
        /* console.log(this.playlist.tracks, "歌单"); */
      });
    },
    /* 小歌单获取音乐Id方法 */
    getSongId(item) {
      this.miniListPlayerId = item.id;
      console.log(this.miniListPlayerId);
      this.$emit("get-player-id", item.id);
    },
    /* 显示评论方法 */
    ShowCommentViewFun() {
      this.ShowCommentView = true;
    },
    /* 关闭评论方法 */
    closeCommentViewFun() {
      this.ShowCommentView = false;
    },
    /* 获取歌曲评论方法 */
    getSongCommentFun() {
      getSongComment({ id: this.playerId }).then((data) => {
        this.songComment = data;
        console.log(this.songComment);
      });
    },
    /* 显示最新评论方法 */
    showNewComment() {
      this.newComment = true;
    },
    /* 显示热门评论 */
    showHotComment() {
      this.newComment = false;
    },
    /* 获取每日推荐歌单方法 */
    getdailyRecommendSongListFun() {
      getdailyRecommendSongList().then((data) => {
        this.playlist = data.data.dailySongs;
        console.log(this.dailyRecommendSongList);
      });
    },
    /* 判断用户是否登录方法 */
    isLogin() {
      let login = window.localStorage.getItem("token");
      // 判断是否登录
      if (!login) {
        Toast("请先登录!");
        this.showBigPlayer = false;
        this.ShowCommentView = false;
        this.showplayer = true;
        this.$router.push("/login");
        this.SongDetail = null;
        return;
      }
    },
    /* 发送评论方法 */
    SentSongCommentFun() {
      SentSongComment({
        t: 1,
        type: 0,
        id: this.playerId,
        content: this.keywords,
      }).then((data) => {
        data;
        console.log(data);
      });
      this.keywords = null;
      this.getSongCommentFun();
      Toast("评论发送成功");
    },
    /* 点赞方法 */
    likeFun(id) {
      console.log("触发点赞方法");
      let login = window.localStorage.getItem("token");
      // 判断是否登录
      if (!login) {
        Toast("请先登录!");
        this.showBigPlayer = false;
        this.ShowCommentView = false;
        this.showplayer = true;
        this.$router.push("/login");
        this.SongDetail = null;
        return;
      } else {
        like({
          id: this.playerId,
          cid: id,
          t: 1,
          type: 0,
        }).then((data) => {
          console.log("点赞", data, id);
          Toast("点赞成功！");
        });
      }
    },
    /* 取消点赞方法 */
    unlikeFun(id) {
      console.log("触发取消点赞方法");
      let login = window.localStorage.getItem("token");
      // 判断是否登录
      if (!login) {
        Toast("请先登录!");
        this.showBigPlayer = false;
        this.ShowCommentView = false;
        this.showplayer = true;
        this.$router.push("/login");
        this.SongDetail = null;
        return;
      } else {
        like({
          id: this.playerId,
          cid: id,
          t: 0,
          type: 0,
        }).then((data) => {
          console.log("取消点赞", data);
          Toast("取消点赞成功！");
        });
      }
    },
    /* 删除小歌单歌曲方法 */
    delSong(index) {
      this.playlist.splice(index, 1);
    },
    /* 喜欢歌曲方法 */
    likeThisSongFun() {
      let login = window.localStorage.getItem("token");
      // 判断是否登录
      if (!login) {
        Toast("请先登录!");
        this.showBigPlayer = false;
        this.ShowCommentView = false;
        this.showplayer = true;
        this.$router.push("/login");
        this.SongDetail = null;
        return;
      } else {
        likeSong({ id: this.playerId }).then((data) => {
          console.log("点赞", data);
          this.likeThisSong = true;
          Toast("喜欢成功");
        });
      }
    },
    /* 取消喜欢方法 */
    DonlikeThisSongFun() {
      likeSong({ id: this.playerId, like: false }).then((data) => {
        console.log("取赞", data);
        this.likeThisSong = false;
        Toast("取消喜欢成功");
      });
    },
  },
  /* 过滤器 */
  filters: {
    /* 播放时长 */
    currentTimefiller(value) {
      let minutes = Math.floor(value / 60); // 获取分钟数
      let seconds = Math.floor(value % 60); // 获取剩余的秒数
      return `${minutes}:${seconds < 10 ? "0" : ""}${seconds}`; // 格式化为分:秒
    },

    /* 获取总时长 */
    durationTimefiller(value) {
      let minutes = Math.floor(value / 60); // 获取分钟数
      let seconds = Math.floor(value % 60); // 获取剩余的秒数
      return `${minutes}:${seconds < 10 ? "0" : ""}${seconds}`; // 格式化为分:秒
    },
  },
  //生命周期 - 创建完成(可以访问当前this实例)
  created() {
    console.log(this.listId);
  },
  //生命周期 - 挂载完成(可以访问DOM元素)
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能,这个函数会触发
};
</script>
<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
/* 迷你播放器 */
.mini-play {
  min-width: 375px;
  max-width: 750px;
  width: 100%;
  height: 3.375rem;
  margin: 0 auto;
  position: fixed;
  bottom: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.9);
  border-top: 1px solid #e4e3e2;
  .title {
    display: flex;
    .img {
      margin-left: 0.9375rem;
      position: relative;
      img {
        width: 2.125rem;
        height: 2.125rem;
        border: 10px solid black;
        border-radius: 50%;
        position: absolute;
        top: -5px;
        &.play {
          animation: rotate 20s linear infinite;
        }
        &.pause {
          animation-play-state: paused;
        }
      }
    }
    h3 {
      max-width: 50vw;
      text-align: left;
      overflow: hidden;
      margin-left: 3.75rem;
      font-size: 1rem;
      height: 3.375rem;
      line-height: 3.375rem;
      span {
        font-size: 0.5rem;
        color: #676766;
      }
    }
  }
  .playbutton {
    height: 4.4375rem;
    line-height: 4.4375rem;
    position: relative;
    margin-right: 10px;
    display: flex;
    .icon {
      width: 35px;
      height: 35px;
      z-index: 996;
      margin-right: 10px;
      .playing {
        .playicon {
        }
      }
      .pasue {
        .pasueicon {
        }
      }
    }
    .van-circle {
      top: 4px;
      left: 0px;
      position: absolute;
      width: 2.125rem;
      height: 2.125rem;
      margin: 0.5rem 0;
    }
    .listicon {
      width: 2.125rem;
      height: 2.125rem;
      margin: 0.7rem 0 0.7rem 0;
    }
    .van-cell {
      width: 42%;
      background-color: transparent;
    }
  }
}
/* 大播放器 */
.bigPlayer {
  position: fixed;
  top: 0;
  //left: 0;
  min-width: 375px;
  max-width: 750px;
  width: 100%;
  height: 100%;
  background-color: black;
  z-index: 900;
  overflow: hidden;
  .backgroundImg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("https://p1.music.126.net/HV_1x-4T4KlTiEuhh1Bw9A==/109951164531899910.jpg?param=140y140")
      no-repeat center;
    background-size: 3000px;
    filter: blur(30px);
    z-index: 700;
  }
  /* 主视图 */
  .view {
    position: absolute;
    top: 0;
    //left: 0;
    min-width: 375px;
    max-width: 750px;
    width: 100%;
    height: 100%;
    z-index: 800;
    /* 顶部 */
    .top {
      display: flex;
      justify-content: space-between;
      margin-top: 18px;
      .goback {
        width: 44px;
        height: 45px;
        line-height: 45px;
      }
      .title {
        h2 {
          font-size: 16px;
          color: rgb(255, 255, 255);
        }
        p {
          font-size: 14px;
          color: rgb(167, 167, 168);
        }
      }
      .rightIcon {
        margin-right: 10px;
        .share {
          .van-cell {
            background-color: transparent;
          }
        }
      }
    }
    /* 主体 */
    .content {
      width: 100%;
      height: 70%;
      text-align: center;
      position: relative;

      .stylus {
        width: 105px;
        height: 188px;
        margin: auto;
        position: absolute;
        top: -290px;
        left: 80px;
        right: 0;
        bottom: 0;
        z-index: 1;
        img {
          width: 105px;
          height: 188px;
        }
        &.isplaying {
          animation: isplaying 1s linear;
          animation-fill-mode: forwards;
          transform-origin: 16px 16px;
        }
        &.ispause {
          animation: ispause 1s linear;
          animation-fill-mode: forwards;
          transform-origin: 16px 16px;
        }
      }
      /* 唱片 */
      .record {
        width: 273px;
        height: 273px;
        background: url(../../assets/img/singlecover.png);
        background-size: 100%;
        border-radius: 50%;
        margin: auto;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        &.play {
          animation: rotate 20s linear infinite;
          animation-fill-mode: forwards;
        }
        &.pause {
          animation-play-state: paused;
          animation-fill-mode: forwards;
        }
        .songImg {
          width: 175px;
          height: 175px;
          border-radius: 50%;
          overflow: hidden;
          margin: auto;
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          img {
            width: 175px;
            height: 175px;
            border-radius: 50%;
          }
        }
      }
      /* 歌词 */
      .lyrics {
        width: 100%;
        height: 100%;
        position: relative;
        overflow: hidden;
        transition: all 1s;
        ul {
          width: 100%;
          transition: all 0.2s linear;
          position: absolute;
          text-align: center;
          top: 210px;
          left: 0;
          li {
            padding: 0, 20px;
            line-height: 36px;
            font-size: 16px;
            color: rgb(141, 141, 141, 0.8);
            &.active {
              color: rgb(255, 255, 255);
            }
          }
        }
      }
    }
    /* 底部 */
    .bottomButtons {
      margin-top: 28px;
      .behindRange {
        width: 140px;
        height: 30px;
        margin: 0 auto;
        padding: 0 30px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .div {
          width: 30px;
          height: 30px;
        }
      }
      .range {
        width: 348px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .playingTime {
          font-size: 6px;
          color: rgb(161, 161, 157);
        }
        .range-in {
          width: 290px;
        }
        .totalTime {
          font-size: 6px;
          color: rgb(161, 161, 157);
        }
      }
      .afterRange {
        width: 225px;
        height: 40px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 12px;
        .playmodel {
        }
        .prev {
        }
        .playbutton {
        }
        .next {
        }
        .playlists {
          .van-cell {
            background-color: transparent;
          }
        }
      }
    }
  }
  /* 评论视图 */
  .commentView {
    width: 100%;
    height: 100%;
    padding: 33px 12px;
    box-sizing: border-box;
    background-color: white;
    z-index: 801;
    .title {
      height: 100px;
      background-color: white;
      .nav {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .left {
          display: flex;
          .goback {
          }
          .titleText {
          }
        }
        .right {
          .share {
          }
        }
      }
      /* 评论区歌曲内容 */
      .songDetails {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 20px;
        .left {
          width: 70%;
          overflow: hidden;
          height: 54px;
          .title {
            display: flex;
            .img {
              margin-left: 0.9375rem;
              position: relative;
              img {
                width: 2.125rem;
                height: 2.125rem;
                border: 10px solid black;
                border-radius: 50%;
                position: absolute;
              }
            }
            h3 {
              width: 70%;
              text-align: left;
              overflow: hidden;
              margin-left: 3.75rem;
              font-size: 1rem;
              height: 3.375rem;
              line-height: 3.375rem;
              span {
                font-size: 0.5rem;
                color: #676766;
              }
            }
          }
        }
        .right {
          color: #1296db;
          background-color: rgb(237, 242, 247);
          border-radius: 10px;
        }
      }
    }
    /* 评论区内容 */
    .content {
      margin-top: 22px;
      .nav {
        height: 40px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-shadow: 0px 10px 15px -11px rgba(0, 0, 0, 0.3);
        .left {
        }
        .right {
          display: flex;
          color: rgb(182, 182, 182);
          .recommend {
            &.active {
              color: black;
            }
          }
          .hot {
            &.active {
              color: black;
            }
          }
        }
      }
      .newContent {
        overflow: auto;
        ul {
          width: 100%;
          height: 565px;
          overflow: auto;
          li {
            margin-top: 11px;
            .top {
              display: flex;
              justify-content: space-between;
              align-content: center;
              .left {
                .avatar {
                  display: flex;
                  img {
                    width: 30px;
                    height: 30px;
                    border-radius: 50%;
                    margin-right: 7px;
                  }
                  .userInfos {
                    display: flex;
                    .name {
                    }
                    .time {
                      text-align: left;
                      color: rgb(181, 181, 181);
                    }
                  }
                }
                .vip {
                  img {
                    width: 29px;
                    height: 11px;
                    border-radius: 0;
                    margin-top: 5px;
                  }
                }
              }
              .right {
                display: flex;
              }
            }
            .content {
              text-align: left;
              margin-left: 35px;
              margin-top: 10px;
              padding-bottom: 10px;
              border-bottom: 1px solid rgb(234, 234, 234);
            }
          }
        }
      }
      .hotConent {
        overflow: auto;
        ul {
          width: 100%;
          height: 555px;
          overflow: auto;
          li {
            margin-top: 11px;
            .top {
              display: flex;
              justify-content: space-between;
              align-content: center;
              .left {
                .avatar {
                  display: flex;
                  img {
                    width: 30px;
                    height: 30px;
                    border-radius: 50%;
                    margin-right: 7px;
                  }
                  .userInfos {
                    display: flex;
                    .name {
                    }
                    .time {
                      text-align: left;
                      color: rgb(181, 181, 181);
                    }
                  }
                }
                .vip {
                  img {
                    width: 29px;
                    height: 11px;
                    border-radius: 0;
                    margin-top: 5px;
                  }
                }
              }
              .right {
                display: flex;
              }
            }
            .content {
              text-align: left;
              margin-left: 35px;
              margin-top: 10px;
              padding-bottom: 10px;
              border-bottom: 1px solid rgb(234, 234, 234);
            }
          }
        }
      }
    }
    /* 评论区发表内容 */
    .sendComment {
      width: 100%;
      min-width: 375px;
      max-width: 750px;
      height: 43px;
      box-shadow: 0px -11px 15px -5px rgba(0, 0, 0, 0.3);
      position: fixed;
      bottom: 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: white;
      .leftInput {
        input {
          margin-left: 12px;
          width: 280px;
          border: none;
        }
      }
      .rightbutton {
        text-align: center;
        line-height: 43px;
        margin-right: 12px;
        color: rgb(207, 207, 207);
      }
    }
  }
}
/* 小歌单列表 */
.van-popup {
  height: 417px;
  margin: 0 auto;
  padding: 15px;
  box-sizing: border-box;
  z-index: 998;
  h3 {
  }
  .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 36px;
    .playModel {
    }
    .rightButton {
      width: 95px;
      display: flex;
      justify-content: space-around;
    }
  }
  ul {
    li {
      width: 100%;
      height: 36px;
      line-height: 36px;
      text-align: left;
      overflow: hidden;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .leftData {
        display: flex;
        h3 {
          font-size: 10px;
        }
        h5 {
          font-size: 8px;
          color: rgb(134, 134, 134);
        }
      }
    }
  }
}
/* 动画 */
@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes isplaying {
  0% {
    transform: rotate(-45deg);
  }
  100% {
    transform: rotate(0);
  }
}

@keyframes ispause {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(-45deg);
  }
}
</style>